<template>
  <div>
    <MainNavBar>
      <template #goBack>
        <div class="home-nav-icon" @click="goBack">
          <i class="iconfont icon-jiantou"></i>
        </div>
      </template>
      <template #center-name> 我的参赛 </template>
    </MainNavBar>
    <div>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <div class="content_C">
          <div class="content">
            <div class="ipt" @click="showPicker = true">
              <div class="ipt_bor">
                 {{ value }}
              <img
                src="http://qnticao.laigl.com/vue/pullingDown2.png"
                v-if="showPicker"
                alt=""
              />
              <img src="http://qnticao.laigl.com/vue/pullingDown1.png" v-else alt="" />
              </div>
            </div>
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker
                title="选择比赛名称"
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              />
            </van-popup>
            <div
              class="match"
              @click="goDetail(item)"
              v-for="(item, index) in changematchlist"
              :key="index"
            >
              <div class="match_content">
                <!-- 顶部颜色条 -->
                <div
                  v-if="item.name == columns[1]"
                  class="match_content_top"
                ></div>
                <!-- 通级 -->
                <!-- 亲子-->
                <div v-else class="match_content_top_b"></div>
                <!-- 比赛进程 -->
                <div class="match_name">
                  <div class="match_name_first">{{ item.name }}</div>
                  <div class="color_li">
                    <div class="collor_one collor_a"></div>
                    <div
                      class="collor_one collor_b"
                      v-if="
                        (item.is_pass == 0 && item.status!=0) ||
                        item.is_pass == 1 ||
                        item.is_pass == 2
                      "
                    ></div>
                    <div
                      class="collor_one collor_c"
                      v-if="item.is_pass == 2"
                    ></div>
                    <div
                      class="collor_one collor_d"
                      v-if="item.is_pass == 1"
                    ></div>
                  </div>
                </div>
                <!-- 选手信息 -->
                <div class="people">
                  <div class="people_name">
                    <div class="icon_img">
                      <img src="http://qnticao.laigl.com/vue/people.png" alt="" />
                    </div>
                    <div>{{ item.sign_name }}</div>
                  </div>
                  <div class="people_name pelple_center">
                    <div  class="icon_img">
                      <img src="http://qnticao.laigl.com/vue/level.png" alt="" />
                    </div>
                    <div v-if="item.compet_id == 1">
                         {{getsexlevel(item)}}
                      <!-- {{ item.sex == 0 ? "男" : "女" }}子{{item.level}}级 -->
                    </div>
                    <div v-else>
                      {{getlevel(item.level)}}
                    </div>
                  </div>
                  <div class="people_right">
                    <!-- <div><img src="http://qnticao.laigl.com/vue/level.png" alt=""></div> -->
                    <div class="color_a" v-if="item.is_pass == null">
                      已报名，去上传视频
                    </div>
                    <div
                      class="color_a"
                      v-if="item.is_pass == 0 && item.status == 0"
                    >
                      已报名，去上传视频
                    </div>
                    <div class="color_b" v-else-if="item.is_pass == 0 && item.status == 1" >
                      已上传，等待结果中
                    </div>
                    <div class="color_b" v-else-if="item.is_pass == 0 && item.status == 4" >
                      视频未上传完
                    </div>
                    <div class="color_b" v-else-if="item.is_pass == 0 && item.status == 5" >
                      视频未上传完
                    </div>
                    <div class="color_c" v-else-if="item.is_pass == 2">
                      未通级，可继续补考
                    </div>
                    <div class="color_d" v-else-if="item.is_pass == 1">
                      已通过
                    </div>
                  </div>
                </div>
                <!-- 报名时间 -->
                <div class="time">报名时间：{{getTime((item.create_time)*1000)}}</div>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { request } from "../../network/request";
import { Toast } from 'vant';
export default {
  data() {
    return {
      value: "全部",
      isLoading: false,
      showPicker: false,
      columns: ["全部"],
      falg: 5,
      isfalg: 2,
      isdisplay: true,
      matchList: [],
      CompetitionList: [],
      changematchlist: [],
      state:null,
      is_general:null,
      status:0
    };
  },
  mounted() {
    this.getCompetition();
    this.getMatchLi();
  },
  methods: {
    getsexlevel(item){
      if (item.level<3) {
          return item.level+'级'
      }
      else{
        if( item.sex == 0){
          return '男子'+item.level+'级'
        }else{
          return '女子' + item.level + '级'
        }
      }
    },
     getlevel(level){
      switch (level) {
        case 1:
          return '初级'
        case 2:
          return '中级'
        case 3:
          return '高级'    
        default:
          break;
      }
    },
    goBack(){
      this.$router.push('/profile')
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      this.changematchlist = [];
      this.changemat();
    },
    onRefresh() {
        // 更新
        this.getCompetition();
        
    },
    changemat() {
      this.changematchlist = [];
      this.matchList.forEach((item) => {
        console.log(item.name, this.value);
        if (item.name === this.value) {
          this.changematchlist.push(item);
        } else if ("全部" === this.value) {
          this.changematchlist = this.matchList;
        } else {
          return;
        }
      });
    },
    // 传递给下一页的状态
    goDetail(item) {
      if(item.name == this.columns[1]){
        this.is_general = 1//通级
      }else{
        this.is_general = 0//亲子
      }
      if (item.is_pass == null) {
        // 测试状态
        this.state = 0
      }
      // if (item.is_pass == 0 && item.status==0) {
      //   // 初始状态
      //   this.state = 0
      // }
      // if (item.is_pass == 0 && item.status==1) {
      //   // 已上传视频
      //   this.state = 0
      // }
      
      if(item.is_pass == 0){
        if (item.status==0) {
           this.state = 0
        } else if(item.status==1){
          this.state = 0
        } else if(item.status==4){
          this.state = 0
        } else{
          this.state = 0
        }
      }
      if (item.is_pass == 2 && item.status==3) {
        // 未通过
        this.state = 1
      }
      if (item.is_pass == 1 && item.status==2) {
        // 已通过
        this.state = 2
      }

      if(item.level < 3){
          if(item.status==0){
            this.status = 0
          }else{
            this.status = 2
          }
      }
      else{
          if(item.status==0){
              this.status = 0     
          }else if(item.status<=3){
              this.status = 2
          }else{
            this.status = 0
          }
      }
      // if(item.level >= 3 && item.status==0){
      //   this.status = 0
      // }
      // else if(item.level >= 3 && item.status<=3){
      //   this.status = 2
      // }
      // else{
      //   this.status = 0
      // }
      // 0未上传视频1上传视频2已传视频
      // 0未上传视频1已上传视频，待审核2已传视频，审核通过3不通过4未上传完5未上传完，审核开始
      // this.state判断detail查看结果的状态栏
      // 0 显示出结果日期
      // 1 显示再来一次
      // 2 显示查看证书
      if(item.level>=3 && item.compet_id!=2){
      // if(item.level>=3 && item.compet_id!=2){
        this.$router.push({
          path: "/manentrydetail",
          query: {
            sign_id: item.id,
            state: this.state,
            is_general:this.is_general,
            status:this.status,
            sex:item.sex
          },
        });
      }else{
        this.$router.push({
          path: "/entrydetail",
          query: {
            sign_id: item.id,
            state: this.state,
            is_general:this.is_general,
            status:this.status
          },
        });
      }
      
    },
    async getMatchLi() {
      try {
        const res = await request({
          url: "/v1/ucenter/my_sign_list",
          data: {
            token: sessionStorage.getItem("token"),
          },
        });
        if (res.code == 2000) {
          this.matchList = res.data;
          this.changematchlist = res.data;
          this.changemat()
        }else{
          Toast(res.msg)
        }
      } catch (error) {}
    },
    async getCompetition() {
      try {
        const data = await request({
          url: "/v1/index/getCompetition",
          data: {
            token: sessionStorage.getItem("token"),
          },
        });
        if (data.code == 200) {
          this.isLoading = false;
          this.columns = ["全部"]
          this.CompetitionList = data.data.rows;
          this.CompetitionList.forEach((item) => {
            this.columns.push(item.name);
          });
        }
      } catch (error) {}
    },
    getTime (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '/' + MM + '/' + d + ' ' + h +':' + m + ':' + s ;
      },
  },
  components: {
    MainNavBar,
  },
};
</script>

<style  scoped>
.content {
  width: 87.733vw;
  margin: 0 auto;
}
.match_name_first {
  overflow: hidden;
  height: 9.333vw;
  line-height: 9.333vw;
  width: 48vw;
}
.ipt {
  height: 10vw;
  display: inline-block;
  margin-top: 5.333vw;
  color: white;
  font-size: 4.267vw;
  line-height: 10vw;
  margin-bottom: 4vw;
  margin-left: 1.333vw;
  /* max-width: 53.333vw; */
  width: auto;
  min-width: 16vw;

}
.ipt_bor{
  border: solid 1px #ccc;
  width: auto;
  height: 10vw;
  padding: 0 2.667vw;
  border-radius: 5vw;
}
.ipt img {
  width: 2.133vw;
  height: 2.133vw;
  /* margin-right: 2.667vw; */
  margin-left: 1.667vw;
}
.match {
  width: 85.333vw;
  margin: 0 auto;
  height: 32vw;
  background-color: #fff;
  border-radius: 3.2vw;
  margin-bottom: 20px;
}
.match_content {
  width: 79.733vw;
  margin: 0 auto;
  padding-top: 5.333vw;
  padding-bottom: 4.267vw;
}
.match_content_top {
  width: 5.333vw;
  height: 0.533vw;
  margin-bottom: 2.667vw;
  background-color: rgba(0, 84, 166, 1);
}
.match_content_top_b {
  width: 5.333vw;
  height: 0.533vw;
  margin-bottom: 2.667vw;
  background-color: #a0f9c0;
}
.match_name {
  display: flex;
  align-items: center;
  color: rgba(10, 36, 99, 1);
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold;
  line-height: 5.867vw;
  font-weight: 600;
}
.collor_one {
  width: 9.6vw;
  height: 2.667vw;
  flex: 1;
  position: relative;

  transform: skew(345deg);
  margin-right: 0.533vw;
}
.collor_a {
  background-color: rgb(252, 235, 0);
  box-shadow:0vw 0.533vw 1.5vw rgba(252, 207, 0, 1);
}
.collor_b {
  background-color: #0054a6;
  box-shadow:0vw 0.533vw 1.5vw #0054a6;
}
.collor_c {
  background-color: #46005b;
  box-shadow:0vw 0.533vw 1.5vw #46005b;
}
.collor_d {
  background-color: #019641;
  box-shadow:0vw 0.533vw 1.5vw #019641;
}
.color_li {
  margin-left: 3.4vw;
  display: flex;
  justify-content: flex-start;
}
.people {
  height: 6.4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.2vw;
  margin-top: 0.8vw;
  margin-bottom: 1vw;
}
.people_name {
  display: flex;
  width: 100px;
  height: 6.4vw;
  align-items: center;
  justify-content: center;
}
.pelple_center {
  margin-left: 1vw;
}
.icon_img{
  width: 6.4vw;
  height: 6.4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F9F9F9;
  border-radius: 50%;
  margin-right: 1.6vw;
}
.people_name img {
  width: 4.267vw;
  height: 4.267vw;
}
.people_right {
  margin-left: 1.667vw;
  text-align: right;
}
.people_right div {
  width: 34.333vw;
  height: 6.4vw;
  line-height: 6.333vw;
}
.color_a {
  color: rgba(252, 207, 0, 1);
}
.color_b {
  color: rgba(0, 84, 166, 1);
}
.color_c {
  color: rgba(70, 0, 91, 1);
}
.color_d {
  color: rgba(1, 150, 65, 1);
}
.time {
  color: rgba(206, 211, 224, 1);
  font-size: 3.2vw;
}
</style>